import React from 'react';
import './recordComponent.scss';
import { Link } from 'react-router-dom';
import {CONST} from "../../base/constant";
export class RecordComponent extends React.Component{

    goDetail(){

        this.props.history.push('/detail/'+this.props.id);

    }

    render(){

        let user = window.localStorage.getItem('user') || '{}';

        user = user && JSON.parse(user);

        const {id,title,description,brief,imgBefore,imgAfter,viewCount,recommendCount,descBefore,descAfter} = this.props;

        let tags = this.props.tags ? this.props.tags.split(','):[];

        const imgBeforeArr = imgBefore ? imgBefore.split(',') : [];
        const imgAfterArr = imgAfter ? imgAfter.split(',') : [];

        return <div className="record" onClick={this.goDetail.bind(this)}>
            <div className="title">
                <span className="icon" />
                <strong>{title}</strong>
                {
                    (this.props.showNewTrigger && user.id) && <Link onClick={e=>e.stopPropagation()} to={'/edit/0'} className="new edit">新增</Link>
                }
                {
                    user.id && <Link onClick={e=>e.stopPropagation()} to={'/edit/'+id} className="edit">编辑</Link>
                }
            </div>
            <div className="compare">
                <div className="before">
                    <img src={CONST.IMG_DOMAIN + '/' + imgBeforeArr[0]} />
                    <i>Before</i>
                </div>
                <div className="after">
                    <img src={CONST.IMG_DOMAIN + '/' + imgAfterArr[0]} />
                    <i>After</i>
                </div>
            </div>
            <h3>{brief}</h3>
            <div className="tag">
                {
                    tags.map(function (value,index) {
                        return <em key={index}>#{value}</em>
                    })
                }
            </div>
            <div className="static">
                <div>
                    <span className="view">浏览 {viewCount}</span>
                </div>
                <span className="zan">赞 {recommendCount}</span>
            </div>
        </div>
    }
}